<template>
  <div style="height: 100%">
    <div class="content1">
      <div style="width: 49%;">
        <div class="bgs">
          <Echart :options="options1" height="100%" width="100%"></Echart>
        </div>
      </div>
      <div style="width: 49%;">
        <div class="bgs">
          <Echart :options="options2" height="100%" width="100%"></Echart>
        </div>
      </div>
    </div>
    <div style="height: 50%;display: block; display: flex; justify-content: space-around; padding: 10px">
      <div style="width: 33%;">
        <div class="bgs">
          <Echart :options="options3" height="100%" width="100%"></Echart>
        </div>
      </div>
      <div style="width: 33%;">
        <dv-scroll-board class="bgs" :config="config"/>
      </div>
      <div style="width: 33%;">
        <div class="bgs">
          <Echart :options="options4" height="100%" width="100%"></Echart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from '@/common/echart'

export default {
  name: "index",
  components: {
    Echart
  },
  data() {
    return {
      options1: {
        title: {
          text: '样本检测趋势图',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'line',
          data: [22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150],
          smooth: false,
          itemStyle: {
            normal: {
              lineStyle: {
                color: 'green' //已完成
              }
            }
          }
        }, {
          type: 'line',
          data: [150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22],
          smooth: false,
          itemStyle: {
            normal: {
              // color:'#8cd5c2', //改变折线点的颜色
              lineStyle: {
                color: 'red' //未完成
              }
            }
          }
        }]
      },
      options2: {
        title: {
          text: '样本接收趋势图',
          left: 'center',
          textStyle: {
            color: '#fff'
          }
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22, 150, 22],
          type: 'line',
          smooth: false
        }]
      },
      options3: {
        title: {
          text: '模块处理能力',
          left: "center",
          textStyle: {
            color: '#fff'
          }
        },
        radar: {
          // shape: 'circle',
          indicator: [
            {name: '输入', max: 999, color: '#fff'},
            {name: '输出', max: 999, color: '#fff'},
            {name: '生化', max: 999, color: '#fff'},
            {name: '免疫', max: 999, color: '#fff'},
            {name: '去盖', max: 999, color: '#fff'},
            {name: '离心', max: 999, color: '#fff'},
          ]
        },
        series: [{
          name: 'asd',
          type: 'radar',
          data: [
            {
              value: [55, 999, 999, 999, 999, 999, 999, 999, 999, 999, 999],
              name: '预算分配（Allocated Budget）'
            }
          ]
        }]
      },
      options4: {
        title: {
          text: "自动审核通过率",
          left: "center",
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '10%',
          left: 'center'
        },
        series: [
          {
            type: 'pie',
            radius: ['60%', '30%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: 'inner',
              formatter: '{b}:{d}'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {
                value: 0, name: '审核通过', itemStyle: {
                  color: "green"
                }
              },
              {
                value: 0, name: '未通过', itemStyle: {
                  color: "red"
                }
              }
            ]
          }
        ]
      },
      config: {
        header: ['时间', '样本条码', '患者姓名', '状态'],
        data: [
        ],
        rowNum: 9,
        waitTime: 500,
        headerBGC: "rgb(97 89 89 / .6)",
      }
    }
  },
  mounted() {
    this.getOption1AndOption2Data()
  },
  methods: {
    /**
     * 获取图1图2的数据
     */
    getOption1AndOption2Data() {
      this.$http.post(this.urlInterface.sampleTendency).then(res => {
        if (res.data.code == 1) {
          //图1
          this.options1.xAxis.data = res.data.data.hours
          this.options1.series[0].data = res.data.data.sampleFinished
          this.options1.series[1].data = res.data.data.sampleNotFinished

          //图2
          this.options2.xAxis.data = res.data.data.hours
          this.options2.series[0].data = res.data.data.sampleReceived
        } else {
          alert("出错了")
        }
      })
    },
    getOption3Data() {

    }
  }
}
</script>

<style lang="scss" >
@import "src/assets/scss/public.scss";

.content1 {
  height: 50%;
  display: block;
  display: flex;
  justify-content: space-around;
  padding: 10px
}

.dv-scroll-board .header{
  background-color: rgba(97, 89, 89, 0.3)!important;
}
</style>
